import React, { PureComponent } from "react";
import About from "./pages/about";
import Home from "./pages/home";
import Profile from "./pages/profile";
import User from "./pages/user";
import NoMatch from "./pages/noMatch";
import {
  BrowserRouter,
  HashRouter,
  Link,
  Route,
  NavLink,
  Switch,
  withRouter,
} from "react-router-dom";
import "./App.css";
// import Login from "./pages/login";
// import Product from "./pages/product";
// import Detail from "./pages/detail";
// import Detail2 from "./pages/detail2";
// import Detail3 from "./pages/detail3";
import { renderRoutes } from "react-router-config";
import routes from "./router";

class App extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      links: [
        { to: "/", title: "首页" },
        { to: "/about", title: "关于" },
        { to: "/profile", title: "我的" },
        { to: "/user", title: "用户" },
      ],
      id: "123",
      info: { name: "why", age: 18, height: 1.88 },
    };
  }
  render() {
    return (
      <div>
        {/* {this.state.links.map((item, index) => {
            return (
              <NavLink exact to={item.to} key={index}>
                {item.title}
              </NavLink>
            );
          })} */}
        <NavLink exact to="/">
          首页
        </NavLink>
        <NavLink to="/about">关于</NavLink>
        <NavLink to="/profile">我的</NavLink>
        <NavLink to="/user">用户</NavLink>
        <NavLink to={`/detail/${this.state.id}`}>详情</NavLink>
        <NavLink to={`/detail2?name=why&age=18`}>详情2</NavLink>
        <NavLink
          to={{
            pathname: "/detail3",
            state: this.state.info,
          }}
        >
          详情3
        </NavLink>
        <button onClick={(e) => this.toProduct()}>商品</button>

        {/* <Switch>
          <Route exact path="/" component={Home}></Route>
          <Route path="/about" component={About}></Route>
          <Route path="/profile" component={Profile}></Route>
          <Route path="/user" component={User}></Route>
          <Route path="/login" component={Login}></Route>
          <Route path="/product" component={Product}></Route>
          <Route path="/detail/:id" component={Detail}></Route>
          <Route path="/detail2" component={Detail2}></Route>
          <Route path="/detail3" component={Detail3}></Route>

          <Route path="/:id" component={User}></Route>
          <Route component={NoMatch}></Route>
        </Switch> */}
        {renderRoutes(routes)}
      </div>
    );
  }
  toProduct() {
    this.props.history.push("/product");
  }
}

export default withRouter(App);
